import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { RouterStore } from 'mobx-react-router';
import CaseStore from '../../stores/CaseStore';
import BDMap, { CustomMap } from '../../component/bd_map/BDMap';

import { NavBar, Icon } from 'antd-mobile';

import './HotEventMap.scss';

interface HotTopTenProps {
    caseStore: CaseStore;
    routingStore: RouterStore;
}

@inject('caseStore', 'routingStore')
@observer
export default class HotEventDetails extends Component<HotTopTenProps> {
    componentWillMount() {
        this.props.caseStore.getMapCaseList();
    }
    onClose = () => {
        this.props.caseStore.closeInfoWindow();
    }
    routeToPage = (type: string, path: string) => {
        this.props.caseStore.CaseListCategory = type;
        this.props.routingStore.push(path);
    }
    render() {
        const { caseStore, routingStore } = this.props;
        const MapCaseList = caseStore.MapCaseList;
        return (
            <div className="map-page">
                <div className="nav-box">
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        leftContent={<span style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}>返回</span>}
                        onLeftClick={() => { routingStore.goBack(); }}
                        className="map-nav"
                    >
                        地图
                    </NavBar>
                </div>

                <div className="hot-map-container">
                    <BDMap
                        afterInit={(map: CustomMap) => {
                            map.initMass(MapCaseList);
                        }}
                        caseStore={caseStore}
                        listenClick={() => {
                            this.routeToPage('工单详情', '/case_details');
                        }}
                    />
                </div>
            </div >
        );
    }
}